<script>
export default {
  name: "WorkOrderXQ2View",
  data() {
    return {
      list: [],

    }
  },
  methods: {
    // 回到上一页
    index(){
      this.$router.push('/work_order')
    },
    // 维保详情
    weibaoxiang(id) {
      this.$router.push({path: '/work_order_wbx', query: {id: id}})
    }
  },
  created() {
    // 获取参数
    this.id = this.$route.query.id
    // 查询
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/findById?id=`+this.id).then(res => {
      this.list = res.data.data;
      console.log(res)
      console.log(this.list)
    })
  }

}
</script>

<template>
  <div>
    <div>
      <van-nav-bar style="float: left;font-size: 20px" @click-left="index()" left-arrow/>
      <h5 style="font-size: 20px;margin-left: 40%;height: 40px">维保详情</h5>
    </div>
    <div>
      <h4>基本信息</h4>
      <div>
        <p>维保编号：{{list.workOrderNumber}}</p>
        <p>维保类型：{{list.type==1?"维修":list.type==2?"维保":"巡检"}}</p>
        <p>处理人：{{list.processor}}</p>
        <p>检查时间：{{list.workOrderChecktime}}</p>
        <p>创建时间：{{list.workOrderCreatetime}}</p>
      </div>
      <p>维保点位</p>
      <div>
        <div class="maintenance - points">
          <h2>维保点位</h2>
          <div class="point">
            <p><span class="location - icon"></span>1# - 1F - A</p>
            <p class="status uncompleted">未完成</p>
          </div>
          <div class="point">
            <p><span class="location - icon"></span>1# - 1F - B</p>
            <p class="status completed">已完成</p>
<!--            <p class="sub - status normal">正常</p>-->
            <el-button>正常</el-button>
          </div>
          <div class="point">
            <p><span class="location - icon"></span>1# - 1F - C</p>
            <p class="status completed">已完成</p>
<!--            <p class="sub - status abnormal">异常</p>-->
            <el-button @click="weibaoxiang(id)">异常</el-button>
          </div>
          <div class="point">
            <p><span class="location - icon"></span>1# - 2F - A</p>
            <p class="status completed">已完成</p>
            <el-button>正常</el-button>
          </div>
        </div>
      </div>

      </div>
  </div>
</template>

<style scoped>
body {
  font-family: Arial, sans - serif;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

.maintenance-details {
                 padding: 20px;
               }

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  font-size: 18px;
}

h1 {
  margin: 0;
  font-size: 24px;
}

.basic-info {
           border-bottom: 1px solid #ccc;
           padding-bottom: 20px;
           margin-bottom: 20px;
         }

h2 {
  margin-top: 0;
  font-size: 20px;
}

p {
  margin: 5px 0;
}

.urgent {
  color: red;
  font-weight: bold;
}

.maintenance-points {
                 margin-top: 20px;
               }

.point {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.location-icon {
              display: inline-block;
              width: 10px;
              height: 10px;
              background-color: blue;
              border-radius: 50%;
              margin-right: 5px;
            }

.status {
  width: 80px;
  text-align: center;
}

.uncompleted {
  color: gray;
}

.completed {
  color: green;
}

.sub-status {
         display: inline-block;
         width: 60px;
         text-align: center;
         border-radius: 5px;
         padding: 3px;
       }

.normal {
  background-color: green;
  color: white;
}

.abnormal {
  background-color: yellow;
  color: black;
}
</style>